<template>
  <div class="score-selcector" v-show="show">
    <van-popup :show="show" :close="onCancel" position="bottom" custom-style="height: 30%;overflow:hidden;">
        <van-picker show-toolbar :columns="scores" @cancel="onCancel" @confirm="onConfirm"/>
    </van-popup>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      scores: ["4.0分", "4.5分", "5.0分", "5.5分", "6.0分", "6.5分", "7.0分", "7.5分", "8.0分", "8.5分", "9.0分"],
      selectScore: null
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // onChange(event) {
    //   const { picker, value, index } = event.mp.detail;
    //   console.log(picker, value, index);
    // },
    onCancel() {
      this.selectScore = '';
      this.$emit('cancel');
    },
    onConfirm(event) {
      const { picker, value, index } = event.mp.detail;
      this.selectScore = value;
      this.$emit('confirm', this.selectScore.split('分')[0] - 0);
    }
  }
};
</script>

<style lang="less" scoped>
.score-selcector {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}
</style>